<template>
  <div class="tree-box">
    <div class="menu-list">
      <div class="menu-row" v-for="(menu, index) in menuList" :key="index">
        <MenuGroup
          v-if="menu.children && menu.children.length"
          :menuInfo="menu"
          :currentOpenKeys.sync="currentOpenKeys"
          @handleMenuNode="handleMenuNodeFunc"
        />
        <div
          v-else
          :class="{
            'menu-item': true,
            'menu-item-selected': currentOpenKeys.includes(menu.id),
          }"
          @click="handleMenuNodeFunc(menu)"
        >
          {{ menu.title }}
        </div>
      </div>
    </div>
  </div>
</template>

<script>
const MenuGroup = {
  template: `
    <div class="menu-group" >
     <div :class="{'menu-group-row': true, 'menu-group-row-selected': currentOpenKeys.includes(menuInfo.id)}" @click="handleMenu(menuInfo)">
       <i class="el-icon-caret-bottom" />
       <i class="el-icon-caret-top" />
       <div class="menu-group-row-title">{{menuInfo.title}}</div>
     </div>
     <template v-for="(item) in menuInfo.children">
       <MenuGroup
          v-if="item.children && item.children.length"
          :menuInfo="item"
          :currentOpenKeys.sync="currentOpenKeys"
          @handleMenuNode="handleMenu"
        />
        <div v-else :class="{ 'menu-item': true, 'menu-item-selected': currentOpenKeys.includes(item.id) }" @click="handleMenu(item)">
          {{ item.title }}
        </div>
     </template>
    </div>
  `,
  name: 'MenuGroup', // 此处name需要与组件名字一致
  props: {
    currentOpenKeys: {
      id: Array,
      default: () => [],
    },
    menuInfo: {
      id: Object,
      default: () => ({}),
    },
  },
  methods: {
    handleMenu(item) {
      this.$emit('handleMenuNode', item);
    },
  },
};
export default {
  props: {},
  components: {
    MenuGroup,
  },
  data() {
    return {
      menuList: [
        {
          title: '一级目录1',
          id: 1,
        },
        {
          title: '一级目录2',
          id: 2,
        },
        {
          title: '一级目录3',
          id: 3,
          children: [
            {
              title: '二级目录31',
              id: 51,
            },
            {
              title: '二级目录32',
              id: 52,
            },
          ],
        },
        {
          title: '一级目录4',
          id: 4,
          children: [
            {
              title: '二级目录41',
              id: 41,
              children: [
                {
                  title: '三级目录411',
                  id: 411,
                },
                {
                  title: '三级目录412',
                  id: 412,
                },
              ],
            },
            {
              title: '二级目录42',
              id: 42,
            },
            {
              title: '二级目录43',
              id: 43,
            },
          ],
        },
      ],
      currentOpenKeys: [], // 当前打开的节点，一直到顶级的key
    };
  },
  created() {},
  mounted() {},
  beforeDestroy() {},
  computed: {},
  watch: {},
  methods: {
    // 操作：点击了菜单栏的某个节点
    handleMenuNodeFunc(menu) {
      if (menu.children && menu.children.length) {
        return;
      }
      if (this.currentOpenKeys.includes(menu.id)) {
        this.currentOpenKeys = this.currentOpenKeys.filter((id) => {
          return menu.id !== id;
        });
      } else {
        this.currentOpenKeys.push(menu.id);
      }
      console.log('操作：点击了菜单栏的某个节点', this.currentOpenKeys);
    },
  },
};
</script>

<style lang="less">
.tree-box {
  width: 100%;
  .menu-list {
    width: calc(100% - 24px);
    padding: 12px 12px;
    .menu-row {
      width: 100%;
      .menu-group {
        margin-left: 12px;
        .menu-group-row {
          height: 32px;
          display: flex;
          align-items: center;
          border-radius: 6px;
          cursor: pointer;
          margin-bottom: 8px;
          i {
            font-size: 15px;
            color: #262626;
          }
          .el-icon-caret-bottom {
            display: block;
          }
          .el-icon-caret-top {
            display: none;
          }
          .menu-group-row-title {
            width: 100%;
            font-size: 14px;
            color: #595959;
            // padding: 0 8px;
          }
          &:hover {
            i,
            .menu-group-row-title {
              color: #fbba12;
            }
          }
        }
        .menu-group-row-selected {
          i,
          .menu-group-row-title {
            color: #fbba12;
          }
          .el-icon-caret-bottom {
            display: none;
          }
          .el-icon-caret-top {
            display: block;
          }
        }
      }
      .menu-item {
        height: 32px;
        line-height: 32px;
        padding: 0 12px;
        margin-bottom: 8px;
        font-size: 14px;
        color: #595959;
        border-radius: 6px;
        cursor: pointer;
        &:hover {
          color: #fff;
          background-color: #fbba12;
        }
      }
      .menu-item-selected {
        color: #fff;
        background-color: #fbba12;
      }
    }
  }
}
</style>
